<template>
  <div id="header">
    <el-tooltip content="放大">
      <span class="iconfont header-iconfont" @click="()=>{graph.zoom(0.2)}">&#xe898;</span>
    </el-tooltip>
    <el-tooltip content="缩小">
      <span class="iconfont header-iconfont" @click="()=>{graph.zoom(-0.2)}">&#xe897;</span>
    </el-tooltip>
    <!-- <el-tooltip content="撤销">
      <span class="iconfont header-iconfont" @click="()=>{graph.history.undo()}">&#xe739;</span>
    </el-tooltip>
    <el-tooltip content="取消撤销">
      <span class="iconfont header-iconfont" @click="()=>{graph.history.redo()}">&#xe652;</span>
    </el-tooltip> -->
    <!-- <ela-tooltip title="全屏">
      <span class="iconfont header-iconfont" @click="()=>{this.$emit('full',true)}">&#xec13;</span>
    </ela-tooltip>
    <el-tooltip title="退出全屏">
      <span class="iconfont header-iconfont" @click="()=>{this.$emit('full',false)}">&#xe7d6;</span>
    </el-tooltip> -->
    <el-tooltip content="保存">
      <span class="iconfont header-iconfont" @click="()=>{$emit('submitForm')}">&#xe64a;</span>
    </el-tooltip>
  </div>
</template>

<script>
import { Graph, DataUri } from '@antv/x6'
export default {
  name: 'GraphConfigContainer',
  props: {
    graph: Graph
  },
  created(){console.log('graph')},
  methods: {
    // 保存成svg图片
    saveToSvg () {
      this.graph.toSVG(dataUri => {
        // 下载
        DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg')
        // }, {
        //   preserveDimensions: {
        //     width: 800,
        //     height: 800
        //   }
        // })
      })
    },
    saveFormData () {
      console.log('graph', this.formData)
    }
  }
}
</script>

<style scoped>
#header {
  display: flex;
  border-top: 1px solid #dfe3e8;
  padding-top: 5px;
  margin:0;
  height: 35px;
  width: 100%;
}
.header-iconfont{
  margin-left: 20px;
  cursor: pointer;
  color: #595959;
}
</style>
